<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="danger_tip">
    <div class="_danger-tip _fade">
        <img class="_alert-img" src="/images/components/danger/ic-alert.png" alt="">
        <div class="_content" v-html="title"></div>
    </div>
</script>
<script>
	var dangerTip = {
		template: "#danger_tip",
        props: ["title"],
		ready: function() {
            var self = this;
            setTimeout(function() {
                self.$dispatch("dangerTipOver");
            }, 3200);
		},
	}
</script>
<style>
    ._danger-tip {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        margin: auto;
        width: 400px;
        padding: 20px 20px;
        line-height: 24px;
        color: #eee;
        text-align: center;
        background: #e46262;
        z-index: 10;
    }
    ._danger-tip ._alert-img {
        margin-right: 10px;
        width: 18px;
        vertical-align: text-bottom;
    }
    ._danger-tip ._content {
        display: inline-block;
        vertical-align: top;
        max-width: 300px;
        font-size: 18px;
        text-align: left;
        line-height: 18px;
    }
    ._danger-tip._fade {
        animation: danger_fade 3s;
        animation-fill-mode: forwards;
        -webkit-animation: danger_fade 3s;
        -webkit-animation-fill-mode: forwards;
    }
    @keyframes danger_fade {
        0% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @-webkit-keyframes danger_fade {
        0% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>
